<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="html" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html">
<link rel="stylesheet" type="text/css"
	href="/ComputerStore/public/css/admin_content.css">
<script type="text/javascript"
	src="/ComputerStore/public/js/jquery-1.6.2.min.js"></script>
<title>Quản lý giao hàng</title>
</head>
<body>
	<h1>Quản lý giao hàng</h1>
	<div id="options">
		<a id="showOrderNotDeliveried" href="#">&nbsp;&nbsp;&nbsp;Danh sách đơn đặt
			hàng chưa giao&nbsp;&nbsp;&nbsp;</a> <a id="showOrderDeliveried" href="#">&nbsp;&nbsp;&nbsp;Danh sách đơn đặt hàng đã giao&nbsp;&nbsp;&nbsp;</a><a id="showDeliveried" href="#">&nbsp;&nbsp;&nbsp;Danh sách phiếu giao hàng&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />

	<!-- Table danh sách đơn đặt hàng chưa giao -->
	<div id="listOrdersNotDeliveried">
		<div class="title">Danh sách đơn đặt hàng chưa giao</div>
		<div class="content" align="center">
			<table border="1">
				<tr>
					<th>STT</th>
					<th>Mã DDH</th>
					<th>Tên KH</th>
					<th>Địa chỉ</th>
					<th>Email</th>
					<th>Số DT</th>
					<th>PTTT</th>
					<th>Địa chỉ giao hàng</th>
					<th>Ngày đặt</th>
					<th>Tổng tiền</th>
					<th>Thao tác</th>
					<th>Giao hàng</th>
				</tr>
				<html:iterator value="orderListNotDeliveried" var="order"
					status="itStatus">
					<tr id="<html:property value="id"/>">
						<td align="center"><html:property value="#itStatus.Count" /></td>
						<td><html:property value="id" /></td>
						<td><html:property value="customer.name" /></td>
						<td><html:property value="customer.address" /></td>
						<td><html:property value="customer.email" /></td>
						<td><html:property value="customer.phone" /></td>
						<td><html:property value="paymentMethod.name" /></td>
						<td><html:property value="deliveryAddress" /></td>
						<td><html:property value="datePurchased" /></td>
						<td><html:property value="total" /></td>
						<td align="center"><a class="operation" name="select"
							href="#" id="<html:property value="id"/>">&nbsp;Xem&nbsp;</a></td>
						<td align="center"><a class="operation"
							href="delivery?id=<html:property value="id"/>">&nbsp;Giao
								hàng&nbsp;</a></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>
		
		<!-- Danh sách các đơn đặt hàng đã giao -->
		<div id="listOrdersDeliveried">
		<div class="title">Danh sách đơn đặt hàng đã giao</div>
		<div class="content" align="center">
			<table border="1">
				<tr>
					<th>STT</th>
					<th>Mã DDH</th>
					<th>Tên KH</th>
					<th>Địa chỉ</th>
					<th>Email</th>
					<th>Số DT</th>
					<th>PTTT</th>
					<th>Địa chỉ giao hàng</th>
					<th>Ngày đặt</th>
					<th>Tổng tiền</th>
					<th>Thao tác</th>
				</tr>
				<html:iterator value="orderListDeliveried" var="order"
					status="itStatus">
					<tr id="<html:property value="id"/>">
						<td align="center"><html:property value="#itStatus.Count" /></td>
						<td><html:property value="id" /></td>
						<td><html:property value="customer.name" /></td>
						<td><html:property value="customer.address" /></td>
						<td><html:property value="customer.email" /></td>
						<td><html:property value="customer.phone" /></td>
						<td><html:property value="paymentMethod.name" /></td>
						<td><html:property value="deliveryAddress" /></td>
						<td><html:property value="datePurchased" /></td>
						<td><html:property value="total" /></td>
						<td align="center"><a class="operation" name="select"
							href="#" id="<html:property value="id"/>">&nbsp;Xem&nbsp;</a></td>
					</tr>
				</html:iterator>
			</table>
		</div>

	</div>

	<!-- Danh sách phiếu giao hàng -->
	<div id="listDeliveried">
		<div class="title">Danh sách phiếu giao hàng</div>
		<div class="content" align="center">
			<table border="1">
				<tr>
					<th>STT</th>
					<th>Mã DDH</th>
					<th>Ngày giao</th>
					<th>Tổng tiền</th>
					<th>Mã phiếu</th>
					<th>Thao tác</th>
				</tr>
				<html:iterator value="deliveryList" var="delivery" status="itStatus">
					<tr id="<html:property value="id"/>">
						<td align="center"><html:property value="#itStatus.Count" /></td>
						<td><html:property value="order.id" /></td>
						<td><html:property value="dateDelivered" /></td>
						<td><html:property value="total" /></td>
						<td><html:property value="id" /></td>
						<td align="center"><a class="operation" name="select"
							href="#" id="<html:property value="order.id"/>">&nbsp;Xem&nbsp;</a></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>
	
	<!-- Chi tiết phiếu -->
	<div id="listOrderDetail">
		<div class="title">Chi tiết phiếu</div>
		<div class="content" align="center">
			<table border="1">
				<tr>
					<th>Tên sản phẩm</th>
					<th>Số lượng</th>
					<th>Đơn giá</th>
					<th>Thành tiền</th>
				</tr>
				<html:iterator value="orderDetailList" var="orderDetail">
					<tr id="<html:property value="id"/>">
						<td style="display:none"><html:property value="order.id"/></td>
						<td><html:property value="product.name" /></td>
						<td><html:property value="productQuantity" /></td>
						<td><html:property value="productPrice" /></td>
						<td><html:property value="total" /></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>


	<!-- Javascript -->
	<script>
		$(document).ready(
				function() {
					/*showOrderNotDeliveried
					showOrderDeliveried
					showDeliveried
					
					listOrdersNotDeliveried
					listOrdersDeliveried
					listDeliveried
					listOrderDetail*/
					
					
					//$("#listDeliveriedDetail").css("display", "none");
					$("#listOrdersDeliveried").css("display", "none");
					$("#listDeliveried").css("display", "none");
					$("#listOrderDetail").css("display", "none");
					$("#showOrderNotDeliveried").css("border-style", "inset");

					$("#showOrderDeliveried").click(function() {
						$(this).css("border-style", "inset");						
						$("#showDeliveried").css("border-style", "outset");
						$("#showOrderNotDeliveried").css("border-style", "outset");
						$("#showDeliveried").css("border-style", "outset");
						$("#listDeliveried").hide("fast");
						//$("#listDeliveriedDetail").hide("fast");
						$("#listOrdersNotDeliveried").hide("fast");
						$("#listOrderDetail").hide("fast");
						$("#listOrdersDeliveried").show("fast");

					});

					$("#showDeliveried").click(function() {
						$(this).css("border-style", "inset");
						$("#showOrderDeliveried").css("border-style", "outset");
						$("#showOrderNotDeliveried").css("border-style", "outset");
					//	$("#listDeliveriedDetail").hide("fast");
						$("#listOrdersNotDeliveried").hide("fast");
						$("#listOrdersDeliveried").hide("fast");
						$("#listOrderDetail").hide("fast");
						$("#listDeliveried").show("fast");

					});
					
					$("#showOrderNotDeliveried").click(function() {
						$(this).css("border-style", "inset");
						$("#showOrderDeliveried").css("border-style", "outset");
						$("#showOrderNotDeliveried").css("border-style", "outset");
						//$("#listDeliveriedDetail").hide("fast");
						$("#listOrderDetail").hide("fast");
						$("#listDeliveried").hide("fast");
						$("#listOrdersDeliveried").hide("fast");
						$("#listOrdersNotDeliveried").show("fast");

					});
					
					$("a").click(function(){
						if($(this).attr("name")=="select"){
							$("#listOrdersNotDeliveried").hide("fast");
							$("#listOrdersDeliveried").hide("fast");
							$("#listDeliveried").hide("fast");
							$("#listOrderDetail").show("fast");
							$("#showOrderNotDeliveried").css("border-style", "outset");
							$("#showOrderDeliveried").css("border-style", "outset");
							$("#showDeliveried").css("border-style", "outset");					
							var id = $(this).attr("id");
							$("#listOrderDetail td").each(function(i){
								var col= i%5;
								if(col==0 && $(this).text()== id){
									$(this).parent().show("fast");									
								}
								if(col==0 && $(this).text()!= id){
									$(this).parent().hide("fast");
								}										
							});
						}
					});
				});
	</script>
</body>
</html>